<template>
  <!--  v-if="passwd == '' && shareInfo.length <= 0"-->
  <div class="no-passwd" v-if="(passwd.length == '' || Object.keys(shareInfo).length == 0) && !linkIsExpire" v-loading="loading">
    <div class="input-space">
      <div class="input-item">
        <el-image :src="require('../assets/avatar.png')" size="large" fit="cover"
                  style="border-radius: 50%;border: 1px solid #eeeeee;"></el-image>
      </div>
      <div class="input-item">
        <el-input v-model="passwd" placeholder="请输入访问密码">
          <template #append>
            <el-button icon="el-icon-right" @click="getShareInfo" @keyup.enter.native="getShareInfo"></el-button>
          </template>
        </el-input>
      </div>
    </div>
  </div>
  <!--   v-else-->

  <div class="result" v-else>

    <div class="expire"
         v-if="(shareInfo.expire_time != null && shareInfo.surplus_time <=0) || shareInfo.status != 1 || linkIsExpire">
      <el-empty description="( ⊙ o ⊙ )啊！分享文件已过期!或者已取消分享"></el-empty>
    </div>
    <div v-else class="container">
      <div class="header">
        <div class="logo">
          <img :src="require('../assets/images/logo.png')" alt="logo">
        </div>
        <div class="opera">

        </div>
      </div>
      <div class="main">
        <div class="content">
          <el-card class="box-card" style="height:85vh;">
            <template #header>
              <div class="card-header">
                <div class="item">
                  <img :src="require('../assets/images/type/'+shareInfo.type+'.png')" alt="">
                </div>
                <div class="item">
                  <span>{{ shareInfo.name }}</span>
                </div>
                <div class="item">
                  <el-button class="button" type="primary">下载</el-button>
                </div>
              </div>
              <div class="card-header">
                <div class="item"></div>
                <div class="item">
                  <i class="el-icon-time"></i>
                  <text>{{ shareInfo.create_time }}</text>
                  -
                  <text v-if="shareInfo.expire_time != 0">过期时间：{{ shareInfo.expire_time }}</text>
                  <text v-else>过期时间：永久有效</text>
                </div>
                <div class="item"></div>
              </div>
            </template>
            <el-table
                :data="fileList"
                stripe
                style="width:100%;"
                @selection="selectFile"
            >
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  width="75">
                <template #default="scope">
                  <img :src="require('../assets/images/type/'+scope.row.filetype+'.png')" alt="">
                </template>
              </el-table-column>
              <el-table-column
                  label="文件名"
                  prop="name">
                <template #default="scope">
                  <span v-if="scope.row.type=='dir'">{{ scope.row.name }}</span>
                  <span v-else>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="大小"
                  prop="size_format">
              </el-table-column>
              <el-table-column
                  label="修改时间"
                  prop="mtime_format">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div class="userinfo">
          <div class="avatar">
            <img :src="shareInfo.userInfo.avatar" alt="">
          </div>
          <div class="username">{{ shareInfo.userInfo.nickname }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  name: "ShareInfo",
  components: {
    Header
  },
  data() {
    return {
      loading:true,
      passwd: '',
      shareInfo: {},
      fileList: [],
      linkIsExpire: true,
    }
  },
  created() {
    this.$axios.get('share/isoverdue', {
      params: {
        flag: this.$route.params.flag
      }
    }).then(res => {
      this.loading = false;
      if (res.data.code == 1) {
        this.linkIsExpire = res.data.data.is_expire;
      }
    })
    document.addEventListener('keydown', (e) => {
      let key = window.event.keyCode;
      if (key == 13) {
        this.getShareInfo();
      }
    })
    //  TODO:在这里获取分享链接的过期时间用于判断是否过期
  },
  methods: {
    getShareInfo() {
      if(this.linkIsExpire){
        return ;
      }
      var that = this;
      that.$axios.get('share/get', {
        params: {
          passwd: that.passwd,
          flag: that.$route.params.flag
        }
      }).then(res => {
        if (res.data.code == 1) {
          that.shareInfo = res.data.data.shareInfo;
          that.fileList = res.data.data.fileList;
        }
      });
    }
  }
}
</script>

<style scoped>
.no-passwd {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: -webkit-linear-gradient(top,hsla(0,0%,59%,.15),hsla(0,0%,59%,0),#e73c7e) no-repeat;*/
  /*background-image: linear-gradient(to right, #ed4264 , #ffedbc );*/
  background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
  /*background-image: linear-gradient(to right, #ec008c , #fc6767 );*/
}

.input-item {
  text-align: center;
  margin-top: 15px;
}


.result {
  width: 100vw;
  height: 100vh;
  background: #f7f7f7;
  /*background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);*/
}

.result .expire {
  width: 100vw;
  height: 100vh;
}

.result .container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.result .header {
  width: 100vw;
  height: 5vh;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
}

.result .header .logo {
  width: 20%;
  padding: 0 20px;
}

.result .header .logo img {
  width: 60%;
}

.result .header .opera {
  width: 20%;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.result .header .opera .no-login a {
  margin-left: 15px;
}

.result .container .main {
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
}

.result .container .main .content {
  width: 85%;
  height: 85vh;
  background: #ffffff;
}

.result .container .main .userinfo {
  width: 14%;
  height: 85vh;
  background: #ffffff;
}

.result .container .main .userinfo .avatar {
  width: 100%;
  text-align: center;
  margin-top: 50px;
}

.result .container .main .userinfo .avatar img {
  border: 3px solid #d9e2ea;
  border-radius: 50%;
}

.result .container .main .userinfo .username {
  width: 100%;
  text-align: center;
  padding: 20px 0;
}

.card-header .item:first-child {
  width: 25px;
}

.card-header .item:last-child {
  float: right;
  text-align: right;
}

.card-header .item {
  width: 45%;
  display: inline-block;
  margin-top: 25px;
  color: #606266;
}

.card-header .item img {
  width: 20px;
}
</style>